<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>snapDom库使用案例</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/@zumer/snapdom/dist/snapdom.min.js"></script> -->
  </head>
  <body>
    <h1>snapDom库介绍</h1>
    <div>可以对页面元素进行截图、下载、转图片、转Blob</div>
    <div>官网：https://www.npmjs.com/package/@zumer/snapdom</div>
    <div>官网：https://github.com/zumerlab/snapdom</div>
    <div id="target">
      <img src="../assets/imgs/8.png" />
    </div>
    <button id="btn">截图</button>

    <script type="module">
      /* 
       @author harvey
       @time 2025.10.4
      */
      // cdn 引入
      // import { snapdom } from 'https://cdn.jsdelivr.net/npm/@zumer/snapdom/dist/snapdom.mjs'
      // ES 模块从本地引入
      import { snapdom } from '../node_modules/@zumer/snapdom/dist/snapdom.mjs'
      const el = document.querySelector('#target')
      const btn = document.querySelector('#btn')
      btn.addEventListener('click', async () => {
        // 获得要操作的元素
        const result = await snapdom(el)
        //  1.转换成 png 图片元素
        const img = await result.toPng(el)
        console.log(img)
        el.appendChild(img)
        // 2. 下载
        await result.download({ format: 'png', filename: 'my-capture-demo' })
        // 3. 转换成Blob
        const blob = await snapdom.toBlob(el)
        console.log('blob---', blob)
      })
    </script>
  </body>
</html>
